<template>
  <div class="container">
    <div class="select-wrap">
      <el-select v-model="value" placeholder="请选择" @change="selectChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div ref="gantt" class="gantt-container"></div>
  </div>
</template>
<script>
import {
  gantt
} from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"

export default {
  name: 'gantt',
  data() {
    return {
      tasks: {
        data: []
      },
      options: [{
        value: '1',
        label: '全部'
      }, {
        value: '2',
        label: '完成'
      }, {
        value: '3',
        label: '正常'
      }, {
        value: '4',
        label: '异常'
      }, {
        value: '5',
        label: '未启动'
      }],
      value: '1'
    }
  },
  methods: {
    //开始时间-结束时间参数
    DateDifference: function(strDateStart, strDateEnd) {
      var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
      var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
      var date3 = endtime_ms - begintime_ms //时间差的毫秒数
      var days = Math.floor(date3 / (24 * 3600 * 1000))
      return days
    },
    initData: function() {
      this.tasks.data = [
        {
          id: 123,
          name: '1#号线',
          text: '1#',
          start_date: '2023-12-09',
          //  duration: 10,
          open: true, //默认打开，
          //   toolTipsTxt: 'xxx项目概念设计',
          //  progress: 0.6,
          status: 'parent'
        },

        {
          id: 1,
          name: '1#号线',
          text: '1#-1号机台',
          start_date: '2023-12-09',
          //  duration: 10,
          open: true, //默认打开，
          //   toolTipsTxt: 'xxx项目概念设计',
          //  progress: 0.6,
          render: 'split',
          parent: 123,
          status: 'yellow'
        },
        {
          toolTipsTxt: 'SP-001',
          text: '1组', // 任务名
          name: 'SP-001',
          start_date: '2023-12-09', // 开始时间
          id: 111, // 任务id
          duration: 3, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 1,
          status: 'yellow'
        },
        {
          toolTipsTxt: 'xxx项目-项目启动会',
          text: '1组', // 任务名
          desc: 'testing',
          name: 'SP-001',
          start_date: '2023-12-15', // 开始时间
          id: 12, // 任务id
          duration: 3, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 6,
          progress: 0.5,
          status: 'yellow'
        },
        {
          toolTipsTxt: 'xxx项目-项目启动会议',
          text: '2组',
          start_date: '2023-12-22',
          id: 112,
          name: 'SP-003',
          duration: 2,
          parent: 1,
          type: 2,
          progress: 0.6,
          status: 'pink'
        },
        {
          toolTipsTxt: 'xxx项目开工会',
          text: '3组',
          name: 'SP-005',
          start_date: '2023-12-25',
          id: 13,
          duration: 4,
          parent: 1,
          type: 3,
          status: 'green'

        },
        {
          toolTipsTxt: 'xxx项目-项目分析',
          text: '6组',
          name: 'SP-006',
          start_date: '2023-12-29',
          id: 16,
          duration: 4,
          parent: 1,
          type: 6,
          progress: 0.6,
          status: 'pink'
        },

        {
          id: 2,
          text: '1#-2号机台',
          name: '1#-2号机台',
          //  start_date: '2024-02-25',
          //  duration: 8,
          open: true,
          //    toolTipsTxt: 'xxx方案设计',
          //  state: 'default',
          color: '#ffffff', //设置颜色
          //  progress: 0.6,
          parent: 123,
          render: 'split',
          status: 'green'
        },
        {
          toolTipsTxt: 'xxx新项目原型图设计',
          text: '原型图设计',
          name: 'SP-002',
          start_date: '2023-12-08',
          id: 21,
          duration: 11,
          parent: 2,
          type: 3,
          status: 'yellow'

        },
        {
          toolTipsTxt: 'xxx项目-项目设计图',
          text: '设计图设计',
          name: 'SP-010',
          start_date: '2023-12-19',
          id: 22,
          duration: 5,
          parent: 2,
          type: 2,
          status: 'pink'
        },
        {
          toolTipsTxt: 'xxx项目-项目确认',
          text: '项目确认',
          name: 'SP-004',
          start_date: '2023-12-29',
          id: 23,
          parent: 2,
          duration: 2,
          type: 1,
          status: 'green'
        },
        {
          id: 333,
          name: '3#号线',
          text: '3#',
          start_date: '2023-12-09',
          //  duration: 10,
          open: true, //默认打开，
          //   toolTipsTxt: 'xxx项目概念设计',
          //  progress: 0.6,
          status: 'parent'
        },
        {
          id: 3,
          text: '3#-1号机台',
          name: '3#-1号机台',
          //  start_date: '2024-02-25',
          //  duration: 8,
          open: true,
          //    toolTipsTxt: 'xxx方案设计',
          //  state: 'default',
          //  progress: 0.6,
          parent: 333,
          render: 'split',
          status: 'popular'
        },
        {
          toolTipsTxt: 'xxx新项目原型图设计',
          text: '原型图设计',
          name: 'SP-002',
          start_date: '2023-12-10',
          id: 31,
          duration: 6,
          parent: 3,
          type: 4,
          status: 'yellow'

        },
        {
          toolTipsTxt: 'xxx项目-项目设计图',
          text: '设计图设计',
          name: 'SP-010',
          start_date: '2023-12-21',
          id: 32,
          duration: 5,
          parent: 3,
          type: 3,
          status: 'pink'
        },
        {
          toolTipsTxt: 'xxx项目-项目确认',
          text: '项目确认',
          name: 'SP-014',
          start_date: '2024-1-1',
          id: 33,
          parent: 3,
          duration: 5,
          type: 7,
          status: 'green'
        },

        {
          id: 4,
          text: '3#-2号机台',
          name: '3#-2号机台',
          //  start_date: '2024-02-25',
          //  duration: 8,
          open: true,
          //    toolTipsTxt: 'xxx方案设计',
          //  state: 'default',
          //  progress: 0.6,
          parent: 333,
          render: 'split',
          status: 'green'
        },
        {
          toolTipsTxt: 'xxx新项目原型图设计',
          text: '原型图设计',
          name: 'SP-002',
          start_date: '2023-12-09',
          id: 335,
          duration: 6,
          parent: 4,
          type: 4,
          status: 'yellow'

        },
        {
          toolTipsTxt: 'xxx项目-项目设计图',
          text: '设计图设计',
          name: 'SP-010',
          start_date: '2023-12-20',
          id: 312,
          duration: 5,
          parent: 4,
          type: 3,
          status: 'pink'
        },
        {
          toolTipsTxt: 'xxx项目-项目确认',
          text: '项目确认',
          name: 'SP-014',
          start_date: '2024-1-3',
          id: 331,
          parent: 4,
          duration: 5,
          type: 6,
          status: 'green'
        },
      ].map(function(current, ind, arry) {
        var newObj = {}
        if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
          if (current.type == 1) { //冒烟
            newObj = Object.assign({}, current, {
              'color': '#fcca02'
            })
          } else if (current.type == 2) { //单元
            newObj = Object.assign({}, current, {
              'color': '#fec0dc'
            })
          } else if (current.type == 3) { //回归
            newObj = Object.assign({}, current, {
              'color': '#62ddd4'
            })
          } else if (current.type == 4) {
            newObj = Object.assign({}, current, {
              'color': '#d1a6ff'
            })
          }
            else if (current.type == 6) {
                newObj = Object.assign({}, current, {
                  'color': '#67C23A'
                })
              }
          else if (current.type == 7) {
            newObj = Object.assign({}, current, {
              'color': '#F56C6C'
            })
          }
        } else { //一级菜单是蓝色的
          newObj = Object.assign({}, current, {
            'color': '#5692f0'
          })
        }
        return newObj
      })
    },
    selectChange(val){
      //测试用例
/*      var obj = {
        toolTipsTxt: '新增任务',
        text: '新增任务', // 任务名
        start_date: '2023-12-15', // 开始时间
        id: 24, // 任务id
        duration: 2, // 任务时长，从start_date开始计算
        parent: 2, // 父任务ID
        type: 4,
        progress:0,
        status: "popular"
      }
      this.tasks.data.push(obj)*/

      // 数据解析
      gantt.parse(this.tasks)
      // 刷新数据
      gantt.refreshData();
    }
  },
  mounted() {
    this.initData()


    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = true
    //只读模式
    gantt.config.readonly = true
    //是否显示左侧树表格
    gantt.config.show_grid = true
    //表格列设置
    gantt.config.columns = [{
      name: 'text',
      label: '生产排单',
      tree: true,
      width: '280',
      onrender: function(task, node) {
        node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status);
      }
    },
      {
        name: 'duration',
        label: '时长',
        align: 'center',
        template: function(obj) {
          return obj.duration + '天'
        },
        hide: true
      }
    ]



    var weekScaleTemplate = function(date) {
      var dateToStr = gantt.date.date_to_str("%m %d");
      var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      var weekNum = gantt.date.date_to_str("第 %W 周");
      return weekNum(date)
    };
    var daysStyle = function(date) {
      var dateToStr = gantt.date.date_to_str("%D");
     // if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
      return "";
    };
    gantt.config.subscales = [
      {
        unit: "day",
        step: 1,
        format: "%d"
      }
    ];

    gantt.plugins({
      tooltip: true
    });
    gantt.attachEvent("onGanttReady", function() {
      var tooltips = gantt.ext.tooltips;
      gantt.templates.tooltip_text = function(start, end, task) {

        return task.toolTipsTxt + "<br/>" +
          "阶段：" + task.text + "<br/>" +
          gantt.templates.tooltip_date_format(start)
      };


    });


    //设置任务条进度内容
    gantt.templates.progress_text = function(start, end, task) {
      return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) + "% </div>";

    };

    //任务条显示内容
    gantt.templates.task_text = function(start, end, task) {
      // return task.text + '(' + task.duration + '天)';
      return "<div style='text-align:center;color:#fff'>" + task.name + '(' + task.duration + '天)' +
        "</div>";

    }


    //任务条上的文字大小 以及取消border自带样式
    gantt.templates.task_class = function(start, end, item) {
      return item.$level == 1 ? 'firstLevelTask' : 'secondLevelTask'
    }

    gantt.config.layout = {
      css: "gantt_container",
      cols: [{
        width: 280,
        min_width: 280,
        rows: [{
          view: "grid",
          scrollX: "gridScroll",
          scrollable: true,
          scrollY: "scrollVer"
        },
          {
            view: "scrollbar",
            id: "gridScroll",
            group: "horizontal"
          }
        ]
      },
        {
          resizer: true,
          width: 1
        },
        {
          rows: [{
            view: "timeline",
            scrollX: "scrollHor",
            scrollY: "scrollVer"
          },
            {
              view: "scrollbar",
              id: "scrollHor",
              group: "horizontal"
            }
          ]
        },
        {
          view: "scrollbar",
          id: "scrollVer"
        }
      ]
    };
    gantt.addLink({
      id:555,
      source:31,
      target:312,
      type:gantt.config.links.finish_to_start
    });
    gantt.addLink({
      id:556,
      source:31,
      target:32,
      type:gantt.config.links.finish_to_start
    })

    gantt.attachEvent('onBeforeLinkAdd', function (id, link) {
         let sourceTask = gantt.getTask(link.source);
         let targetTask = gantt.getTask(link.target);
        console.log(sourceTask, targetTask);
         console.log(sourceTask.type === 'task' && targetTask.type === 'task');
         // 只能任务指向任务
         return sourceTask.type === 'task' && targetTask.type === 'task';
       });
    //时间轴图表中，任务条形图的高度
    // gantt.config.task_height = 28
    //时间轴图表中，甘特图的高度
    // gantt.config.row_height = 36
    //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
    gantt.config.show_task_cells = true
    //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true
    gantt.config.min_column_width = 50;
    gantt.config.auto_types = true;
    gantt.config.xml_date = "%Y-%m-%d";
    gantt.config.scale_unit = "month";
    gantt.config.step = 1;
    gantt.config.date_scale = "%Y年%M";
    gantt.config.start_on_monday = true;
    gantt.config.scale_height = 90;
    gantt.config.autoscroll = true;
    gantt.config.calendar_property = "start_date";
    gantt.config.calendar_property = "end_date";
    gantt.config.readonly = true;
    gantt.i18n.setLocale('cn');

    // 初始化
    gantt.init(this.$refs.gantt)
    // 数据解析
    gantt.parse(this.tasks)
  }
}
</script>
<style lang="scss">
.gantt-chart-class .row-class .cell-class {
  background-color: transparent !important;
}
.firstLevelTask {
  border: none;

  .gantt_task_content {
    font-size: 15px;
  }
}

.secondLevelTask {
  border: none;
}

.thirdLevelTask {
  border: 2px solid #a6a6a6;
  color: #da645d;
  background: #da645d;
}

.milestone-default {
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
  border: none;
  background: #5692f0;
}

.milestone-finished {
  border: none;
  background: #84bd54;
}

.milestone-canceled {
  border: none;
  background: #da645d;
}

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;
  .gantt_grid_head_cell {
    padding-left: 20px;
    text-align: left !important;
    font-size: 15px;
    color: #000000;
  }

  .select-wrap {
    position: absolute;
    top: 25px;
    z-index: 99;
    width: 90px;
    left: 180px;

    .el-input__inner {
      border: none;
    }
  }

  .left-container {
    height: 100%;
  }

  .parent {
    .gantt_tree_icon {
      //&.gantt_folder_open {
      //  background-image: url(assets/gantt-icon.svg) !important;
      //}
      //&.gantt_folder_closed{
      //  background-image: url(assets/gantt-icon-up.svg) !important;
      //}
    }
  }

  .green,
  .yellow,
  .pink,
  .popular {
    .gantt_tree_icon.gantt_file {
      background: none;
      position: relative;

      &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .green {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #84bd54;
      }
    }
  }

  .yellow {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #fcca02;
      }
    }
  }

  .pink {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #da645d;
      }
    }
  }

  .popular {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #d1a6ff;
      }
    }
  }

}

.left-container {
  height: 100%;
}

.gantt_task_content {
  text-align: left;
  padding-left: 10px;
}

</style>
